<template>
  <div class="allSong">
    <!-- 上方 -->
    <div class="tag">
      <el-popover placement="bottom" trigger="hover">
        <el-button slot="reference">全部歌单<i class="iconfont icon-youjiantou"></i></el-button>
        <ul v-for="(items,index) in tagsData" :key="index" class="classify-item">
          <li v-for="(item,indey) in items" :key="indey" :class="{li_bor: indey!==0}" @mouseleave="move_color = false" @mouseover="move_color=indey" @click="handleSong(item.name)">
            <i class="iconfont" v-if="item.icon" :class="[item.icon?item.icon: '']"></i>
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </el-popover>
      <ul class="classfify">
        <li v-for="(item,index) in TabBar" :key="index" @click="handleSong(item)"><span>{{item}}</span></li>
      </ul>
    </div>
    <!-- 下方歌曲列表 -->
    <div class="song-list">
      <ul class="song_play">
        <li v-for="(item,index) in list" :key="index" @mouseleave="playMove = false" @mouseover="playMove = index" @click="itemClick(item)">
          <img :src="item.coverImgUrl" alt="">
          <div class="playCount" v-show="playMove === index" :class="{songs_top_bottom: playMove === index}">
            <i class="iconfont icon-sanjiaoright"></i>
            <span>{{item.playCount | initVolume}}</span>
          </div>
          <span>{{item.name}}</span>
        </li>
      </ul>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="songPayData.num" :page-sizes="[10, 15, 30, 100]" :page-size="songPayData.size" layout="total, sizes, prev, pager, next, jumper" :total="songPayData.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getSongTags, getSongList } from '@/api/songrc'

export default {
  name: 'AllSong',
  data() {
    return {
      TabBar: ['全部', '粤语', 'ACG', '华语', '流行', '欧美', '说唱', '摇滚', '民谣', '电子', '轻音乐', '影视原声', '怀旧'],
      songPayData: {
        // 总页数
        total: 0,
        // 当前页数
        num: 1,
        cat: '全部',
        // 一页可以显示多少个数据
        size: 12,
        // 分类数据显示
        // offset: 0
      },
      playMove: false,
      // 歌单列表
      list: [],
      tagsData: {
        language: [],
        style: [],
        scenes: [],
        emotion: [],
        theme: []
      }
    }
  },
  async created() {
    this.getSongList()
    const { data: res } = await getSongTags()
    res.sub.forEach(item => {
      switch (item.category) {
        case 0:
          this.tagsData.language.push(item)
          break;
        case 1:
          this.tagsData.style.push(item)
          break;
        case 2:
          this.tagsData.scenes.push(item)
          break;
        case 3:
          this.tagsData.emotion.push(item)
          break;
        case 4:
          this.tagsData.theme.push(item)
          break;
      }
    })
    this.tagsData.language.unshift({ name: '语言', icon: 'icon-yuyan' })
    this.tagsData.style.unshift({ name: '风格', icon: 'icon-fenggepitchon' })
    this.tagsData.scenes.unshift({ name: '场景', icon: 'icon-kafei' })
    this.tagsData.emotion.unshift({ name: '情感', icon: 'icon-smiling' })
    this.tagsData.theme.unshift({ name: '主题', icon: 'icon-pifuzhuti' })
  },
  methods: {
    async getSongList() {
      const { data: res } = await getSongList(
        this.songPayData.cat,
        this.songPayData.size,
        this.songPayData.offset
      )
      console.log(res)
      this.list = res.playlists
      this.songPayData.cat = res.cat
      this.songPayData.total = res.total
    },
    handleSizeChange(page) {
      this.songPayData.size = page
      this.getSongList()
    },
    handleCurrentChange(num) {
      this.songPayData.num = num
      this.songPayData.offset = (num - 1) * this.songPayData.size
      this.getSongList()
    },
    handleSong(val) {
      console.log(val)
      this.songPayData.cat = val
      this.songPayData.num = 1
      this.$emit('updateCat', val)
      this.getSongList()
    },
    itemClick(val) {
      window.sessionStorage.setItem('id', val.id)
      this.$router.push(`/home/detail/${val.id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.tag {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .classfify {
    display: flex;
    li {
      padding: 5px 10px;
      &:hover {
        color: red;
      }
    }
  }
}
.song-list {
  .song_play {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      position: relative;
      width: 200px;
      margin: 10px 20px;
      overflow: hidden;
      img {
        width: 100%;
        border-radius: 8px;
      }
      .playCount {
        position: absolute;
        top: -20%;
        right: 0;
        left: 0;
        padding: 3px 10px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0.01), rgba(0, 0, 0, 0.5));
        color: #fff;
        text-align: right;
        box-sizing: border-box;
      }
    }
  }
  .block {
    .el-pagination {
      text-align: center;
    }
  }
}
.songs_top_bottom {
  animation: songs_top_bottom 0.5s linear forwards;
}
.classify-item {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  li {
    padding: 10px;
    margin: 5px 10px;
    cursor: pointer;
    i {
      margin-right: 5px;
      font-size: 16px;
    }
    &.li_bor {
      border: 1px solid #ccc;
    }
    &:not(:first-child):hover {
      color: red;
    }
    // &:nth-child(n + 2):hover {
    //   color: cyan;
    // }
  }
}
</style>